<template>
    <div class="popup-hide" :class="{ show: bindPhone.showPopup }">
        <div class="popup-small-box">
            <div class="bind-phone">
                <div class="bind-tit">
                    <div class="txt">绑定手机号</div>
                    <div class="close" @click="closeBindPhonePopup">
                        <img src="@/assets/images/close.png" />
                    </div>
                </div>
                <div class="bind-con">
                    <div class="item">
                        <input type="number" v-model="phone" placeholder="输入手机号" maxlength="11" auto-focus />
                    </div>
                    <div class="item">
                        <input type="text" v-model="code" placeholder="输入验证码" maxlength="6" style="margin-right: 0.1rem" />
                        <getvali-date
                            codeType="bindPhone"
                            :codeMobile="phone"
                            :class="'get-code'"
                            :style="{ 'border-color': themes.color, color: themes.color }"
                            @sendCode="getInvRelationShipSetting"
                        />
                    </div>
                    <template v-if="inviteSetting.registerNeedInviter && !inviteSetting.hasInvitationRelationship">
                        <div class="border">
                            <input v-model="inviteCode" class="p-1" type="text" placeholder="请输入邀请码" />
                        </div>
                        <div class="d-flex a-center font-12 py-1" v-if="inviteSetting.defaultInvitationCode">
                            <div class="flex-1 px-1 line-clamp1">
                                <span>备选邀请码：</span>
                                <span>{{ inviteSetting.defaultInvitationCode }}</span>
                            </div>
                            <span class="bg-main text-fff p-1 rounded-6" @click="fillInviteCode">一键填入</span>
                        </div>
                    </template>

                    <div class="item">
                        <div type="button" :style="{ background: themes.color }" class="btn" @click="bindPhoneAction">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import getvaliDate from 'components/getvaliDate/getvaliDate'
import { mapState } from 'vuex'
import { InvRelationShipSetting, bindUserMobile } from 'api/my'

export default {
    components: {
        getvaliDate
    },
    props: {
        bindPhone: Object,
        bindScene: {
            type: String,
            default: 'NORMAL'
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    data() {
        return {
            phone: null,
            code: '',
            inviteCode: '', // 邀请码
            inviteSetting: {} // 邀请关系配置
        }
    },
    mounted() {},
    methods: {
        bindPhoneAction() {
            let that = this

            let phone = that.phone
            let code = that.code
            let countryCode = '+86'

            if (!phone) {
                that.$toast({ message: '手机号码不能为空' })
                return
            }
            if (!/^1[1-9][0-9]{9}$/.test(phone)) {
                that.$toast({ message: '您输入的手机号码不正确' })
                return
            }
            if (!code) {
                that.$toast({ message: '请输入验证码' })
                return
            }
            if (!/^\d{6}$/gi.test(code)) {
                that.$toast({ message: '您输入的验证错误' })
                return
            }

            let params = {
                phoneNumber: phone,
                countryCode: countryCode,
                code: code,
                invitationCode: this.inviteCode,
                bindScene: this.bindScene
            }

            bindUserMobile(params).then((res) => {
                if (res.status == 1) {
                    that.bindPhone.showPopup = false
                    that.phone = ''
                    that.code = ''
                    that.inviteCode = ''
                    if (this.$parent.$parent.bindPhone) {
                        this.$parent.$parent.bindPhone.already = true
                    }
					
                    that.$toast({ message: '恭喜您,绑定成功!', forbidClick: true })
					this.$parent.$parent.onRefresh()
                    setTimeout(() => {
                        this.$emit('callback')
                    }, 100)
                } else {
                    that.$toast({ message: res.msg })
                }
            })
        },

        // 关闭绑定手机弹层
        closeBindPhonePopup() {
            this.phone = ''
            this.code = ''
            this.bindPhone.showPopup = false
        },

        // 填入邀请码
        fillInviteCode() {
            this.inviteCode = this.inviteSetting.defaultInvitationCode
        },

        // 获取配置
        getInvRelationShipSetting() {
            InvRelationShipSetting().then((res) => {
                if (!res.success) {
                    this.$toast(res.msg)
                    return
                }

                this.inviteSetting = res.result
            })
        }
    }
}
</script>
<style src="@/assets/css/popup.css" scoped></style>
<style src="@/assets/css/my.css" scoped></style>
<style src="@/assets/css/style/my-style.css" scoped></style>
